<template>
	<code class="bear-CodeShow" v-html="html"></code>
</template>

<script>
	import hljs from 'highlight.js';
	export default{
		name:'CodeShow',
		props:{
			code:String
		},
		computed:{
			html(){
				const res=hljs.highlightAuto(this.code.trim(),['html','javascript']);
				return res.value;
			}
		}
	};
</script>

<style lang="scss">
	.bear-CodeShow{
		display:block;
		background:#f6f6f6;
		margin:20px;
		padding:10px 20px;
		border:1px solid #d3d3d3;
		border-radius:5px;
		white-space:pre-wrap;
		tab-size:20px;
		.hljs-tag,.hljs-name{
			color:#0033B3;
		}
		.javascript{
			.hljs-keyword,.hljs-function{
				color:#0033B3;
				font-weight:normal;
			}
			.hljs-attr{
				color:#830091;
			}
			.hljs-comment{
				font-style:normal;
				color:#888;
			}
			.hljs-params{
				text-decoration:underline;
				color:#000;
			}
		}
	}
</style>
